<template>
  <div>
    <el-row type="flex" align="middle" :span="12">
            <el-col :span="4">
              <el-input @keyup.enter.native="searchOne()" v-model="search" placeholder="请输入编号或者名称"></el-input>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" icon="el-icon-search" @click="searchOne()" size="small">搜索</el-button>
            </el-col>
            <el-col :span="1.8">
              <el-button type="primary" icon="el-icon-plus" @click="inputOpen()" size="small">添加</el-button>
            </el-col>
    </el-row>
    <el-table :data="items" height="70vh" border style="width: 100%">
      <el-table-column prop="id" label="编号" align="center"> </el-table-column>
      <el-table-column prop="name" label="名称" align="center"> </el-table-column>
      <el-table-column prop="guige" label="规格" align="center"> </el-table-column>
      <el-table-column prop="xinghao" label="型号" align="center">
      </el-table-column>
      <el-table-column prop="amount" label="数量" align="center">
      </el-table-column>
      <el-table-column prop="beizhu" label="备注" width="180px" align="center">
      </el-table-column>
      <el-table-column width="210px" label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="showdetails(scope.$index, scope.row)">介绍</el-button>
          <el-button type="primary" size="mini" @click="showinfo(scope.$index, scope.row)">编辑</el-button>
          <el-button type="primary" size="mini" @click="deleteItem(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVisible" width="30%" @open="onOpen" @close="onClose" :title="'编号:' + item.id">
      <el-form ref="elForm" :model="item" :rules="rules" size="small" label-width="100px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="item.name" placeholder="请输入名称" clearable :style="{ width: '100%' }"></el-input>
        </el-form-item>
        <el-form-item label="规格" prop="guige">
          <el-input v-model="item.guige" placeholder="请输入规格" clearable :style="{ width: '100%' }"></el-input>
        </el-form-item>
        <el-form-item label="型号" prop="xinghao">
          <el-input v-model="item.xinghao" placeholder="请输入型号" clearable :style="{ width: '100%' }"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="amount">
          <el-input v-model="item.amount" placeholder="请输入数量" clearable :style="{ width: '100%' }">
          </el-input>
        </el-form-item>
        <el-form-item label="备注" prop="beizhu">
          <el-input v-model="item.beizhu" placeholder="请输入备注" clearable :style="{ width: '100%' }">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="UpdateItem">确定</el-button>
      </div>
    </el-dialog>

    <!-- 添加详情 -->
    <el-dialog :visible.sync="intemVisible" width="30%" @open="onOpen" @close="onClose" :title="'新物品'">
      <el-form ref="elForm" :model="input" :rules="rules" size="small" label-width="100px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="input.name" placeholder="请输入名称" clearable :style="{ width: '100%' }"></el-input>
        </el-form-item>
        <el-form-item label="规格" prop="guige">
          <el-input v-model="input.guige" placeholder="请输入规格" clearable :style="{ width: '100%' }"></el-input>
        </el-form-item>
        <el-form-item label="型号" prop="xinghao">
          <el-input v-model="input.xinghao" placeholder="请输入型号" clearable :style="{ width: '100%' }"></el-input>
        </el-form-item>
        <el-form-item label="数量" prop="amount">
          <el-input v-model="input.amount" placeholder="请输入数量" clearable :style="{ width: '100%' }">
          </el-input>
        </el-form-item>
        <el-form-item label="备注" prop="beizhu">
          <el-input v-model="input.beizhu" placeholder="请输入备注" clearable :style="{ width: '100%' }">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="InsertItem">确定</el-button>
      </div>
    </el-dialog>

    <!-- 介绍页 -->
    <el-dialog :visible.sync="detailsVisible" width="50%" @open="onOpen" @close="onClose" title="物品介绍">
      <div id="item_left">
        <div style="height:15%"></div>
        <!-- 图片 -->
        <div class="demo-image__preview">
          <el-image style="width: 15vw; height: 15vw; margin:auto" :src="url" :preview-src-list="srcList">
          </el-image>
        </div>
        <!-- 图片 -->
      </div>
      <div id="item_right">
        <el-descriptions :title="itemdetail.name" direction="vertical" :column="4" border>
          <el-descriptions-item labelStyle="color:#409EFF" label="详情" :span="4">{{ itemdetail.usement
            }}</el-descriptions-item>
          <el-descriptions-item labelStyle="color:#409EFF" label="使用方法" :span="4">{{ itemdetail.method
            }}</el-descriptions-item>
          <el-descriptions-item labelStyle="color:#409EFF" label="价格" :span="4">{{ itemdetail.price
            }}</el-descriptions-item>
          <el-descriptions-item labelStyle="color:#409EFF" label="备注" :span="4">{{ itemdetail.attention
            }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div slot="footer">
        <el-button @click="close">确定</el-button>
        <el-button type="primary" @click="changeItem">修改</el-button>
      </div>
    </el-dialog>

    <!-- 修改介绍页 -->
    <el-dialog :visible.sync="changeVisible" width="30%" @open="onOpen" @close="onCloseItem" :title="'修改物品介绍'">
      <el-form ref="form" label-width="80px">
        <!-- 图片 -->
        <el-upload id="img" ref="upload" :action="'http://localhost:8085/upload?name=' + itemdetail.name" name="picFile"
          list-type="picture-card" :auto-upload="false" :class="objClass" :data="dataList" :on-change="changeimg"
          :on-preview="handlePictureCardPreview" :on-success="handleSuccess" :on-exceed="exceed"
          :on-remove="handleRemove">
          <el-button size="small" type="primary" v-show="updateimgVisible">点击上传图片</el-button>
        </el-upload>
        <el-dialog :visible.sync="imgVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
        <!-- 图片 -->
        <el-form-item label="名称">
          <el-input v-model="itemdetail.name"></el-input>
        </el-form-item>
        <el-form-item label="详情">
          <el-input type="textarea" v-model="itemdetail.usement"></el-input>
        </el-form-item>
        <el-form-item label="使用方法">
          <el-input type="textarea" v-model="itemdetail.method"></el-input>
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="itemdetail.price"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="itemdetail.attention"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="changeVisible = false">取消</el-button>
        <el-button type="primary" @click="Updatedetail">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style>
/*当upLoadHide为true时，启用如下样式，即上传框的样式，若为false则不启用该样式*/
.upLoadHide .el-upload {
  display: none;
}

.el-upload--picture-card {
  border: none;
  background: none;
}
</style>

<style scoped>
#item_left {
  float: left;
  width: 40%;
  height: 400px;
  padding: auto;
}

#item_right {
  float: left;
  width: 60%;
  height: 40%;
  margin-bottom: 20px;
}

#img {
  margin-bottom: 20px;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #0042dc;
}

.grid-content {
  border-radius: 4px;
}

.el-input__inner {
  width: 85%;
}
</style>

<script>
export default {
  data() {
    return {
      updateimgVisible: true,
      dialogImageUrl: '',
      imgVisible: false,
      url: '',
      srcList: [
        '',
      ],
      search: "",
      input: {
        id: "",
        name: "",
        guige: "",
        xinghao: "",
        amount: "",
        beizhu: "",
      },
      items: [
        {
          id: "",
          name: "",
          guige: "",
          xinghao: "",
          amount: "",
          beizhu: "",
        },
      ],
      detailsVisible: false,
      dialogVisible: false,
      intemVisible: false,
      changeVisible: false,
      objClass: {
        upLoadShow: true,
        upLoadHide: false,
      },
      item: {
        id: "",
        name: "",
        guige: "",
        xinghao: "",
        amount: "",
        beizhu: "",
      },
      itemdetail: {
        id: '',
        name: '',
        price: '',
        usement: '',
        method: '',
        attention: ''
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
        ],
        guige: [
          {
            required: true,
            message: "请输入规格",
            trigger: "blur",
          },
        ],
        xinghao: [
          {
            required: true,
            message: "请输入型号",
            trigger: "blur",
          },
        ],
        amount: [
          {
            required: true,
            message: "请输入数量",
            trigger: "blur",
          },
        ],
        beizhu: [
          {
            required: false,
            message: "请输入备注",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created: function () {
    //发请求获取所有数据
    this.$axios({
      url: "http://localhost:8085/selectAll",
      method: "get",
    })
      .then((response) => {
        this.items = response.data;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  mounted() {
    window.history.forward(1);
  },
  methods: {
    changeimg(file, fileList) {
      this.objClass.upLoadHide = true;//上传图片后置upLoadHide为真，隐藏上传框
      this.objClass.upLoadShow = false;
      if (this.$refs['dataList'] == []) {
        this.updateimgVisible = true;
      }
      else {
        this.updateimgVisible = false;
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.objClass.upLoadShow = true;//删除图片后显示上传框
      this.objClass.upLoadHide = false;
      this.updateimgVisible = true;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.imgVisible = true;
    },
    handleSuccess() {

    },
    exceed() {
      this.$message.error("图片只能选择1个!");
    },
    showdetails(index, row) {
      this.item = row;
      console.log(this.item);
      this.$axios
        .get("http://localhost:8085/selectbyburryName?name=" + row.name)
        .then((response) => {
          this.itemdetail = response.data;
          this.url = 'http://localhost:8085/img/items/' + this.itemdetail.name + '.jpg' + '?t=' + (new Date().getTime());
          console.log(this.url);
          this.srcList = [this.url];
        });
      this.detailsVisible = true;
    },
    showinfo(index, row) {
      this.item = row;
      console.log(this.item);
      this.dialogVisible = true;
    },
    Updatedetail() {
      if (this.$refs['dataList'] != []) {
        this.$refs.upload.submit();
        this.importDialog = false;
      }
      this.changeVisible = false;
      this.$axios
        .post("http://localhost:8085/Updatedetail?", this.itemdetail)
        .then(response => {
          this.itemdetail = response.data;
          this.url = 'http://localhost:8085/img/items/' + this.itemdetail.name + '.jpg' + '?t=' + (new Date().getTime());
          this.srcList = [this.url];
        });
      this.$message.success("修改成功");
      console.log("Updatedetail");
    },
    UpdateItem() {
      if (confirm("是否确更改？")) {
        this.dialogVisible = false;
        this.$axios
          .post("http://localhost:8085/UpdateItem?", this.item)
          .then(function () {
            this.input = {};
            location.reload();
          });
        console.log("结束");
      }
    },
    InsertItem() {
      if (confirm("是否添加？")) {
        this.intemVisible = false;
        this.$axios
          .post("http://localhost:8085/InsertItem?", this.input)
          .then(function () {
            location.reload();
          });
        this.input = {};
        this.$message.success("添加成功");
        console.log("结束");
      }
    },
    deleteItem(index, row) {
      if (confirm("是否删除？")) {
        console.log(index, row);
        this.$axios
          .get("http://localhost:8085/deleteItem?id=" + row.id)
          .then(response => {
            this.$message.success("删除成功");
            location.reload(); //刷新页面
          });
      }
    },
    searchOne() {
      if (this.search == "") {
        this.$axios({
          url: "http://localhost:8085/selectAll",
          method: "get",
        })
          .then((response) => {
            this.items = response.data;
          })
          .catch((err) => {

          });
      } else {
        var numReg = /^[0-9]*$/;
        var numRe = new RegExp(numReg);
        if (numRe.test(this.search)) {
          this.$axios
            .get("http://localhost:8085/selectbyID?id=" + this.search)
            .then((response) => {
              console.log(response.data);
              this.items = response.data;
            });
        } else {
          this.$axios
            .get("http://localhost:8085/selectbyName?name=" + this.search)
            .then((response) => {
              console.log(response.data);
              this.items = response.data;
            });
        }
      }
    },

    onOpen() { },
    changeItem() {
      this.changeVisible = true;
    },
    inputOpen() {
      this.intemVisible = true;
    },
    onCloseItem() {

    },
    onClose() {
      this.itemdetail = {};
    },
    close() {
      this.dialogVisible = false;
      this.intemVisible = false;
      this.detailsVisible = false;
      this.changeVisible = false;
    },
  },
};
</script>